<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="600" height="800"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'root',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    cutLeft: 0, cutTop: 0, // source position, default 0
                    // left: Easycanvas.Transition.pendulum(111, 222, 1000).loop(),
                    left: 10,
                    top: 100,
                    fh: Easycanvas.Transition.pendulum(0.1, 0.2, 300).loop(),
                    fv: Easycanvas.Transition.pendulum(0.1, 0.2, 1000).loop(),
                    fx: 0,
                    fy: 125,
                    opacity: 1,
                    rotate: 0,
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    click: function (e) {
                        this.style.fh += 0.1;
                        this.style.fh %= 1;
                        console.log(this.style.fh);
                        return true;
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });
        });
    </script>
</body>

